<template>
    <!--二级路由的坑 -->
    <router-view v-if="$route.path == '/home/searchpopup'"></router-view>
    <div class="home" v-else>
        <!-- 搜索框 -->
        <van-search v-model="value" @click="$router.push('/home/searchpopup')" shape='round' placeholder="请输入搜索关键词" />
        <!-- 轮播图 -->
        <Myswiper :bannerArr="bannerArr"></Myswiper>
        <!-- 宫格导航组件 -->
        <Mygrid :channelArr="channelArr"></Mygrid>
        <!-- 品牌制造商直供 -->
        <Brandlist :brandlistArr="brandlistArr"></Brandlist>
        <!-- 新品首发 -->
        <Newproduct title="周一周四.新品首发" :newGoodsListArr="newGoodsListArr"></Newproduct>
        <!-- 专题精选 -->
        <Topiclist :topicListArr="topicListArr"></Topiclist>
        <!-- 商品分类列表 -->
        <ul class='categorylist'>
            <li v-for="item in categoryListArr" :key="item.id">
                <Newproduct :title="item.name" :newGoodsListArr="item.goodsList"></Newproduct>
            </li>
        </ul>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue';
// 导入轮播图组件
import Myswiper from '@/components/Myswiper.vue'
// 导入首页接口
import { gethomedata } from '@/api/home'
// 导入类型
import type {
    Ibanneritem,
    Ichannelitem,
    Ibrandlistitem,
    Inewgoodslistitem,
    Itopiclistitem,
    Icategorylistitem
} from '@/types/homeType'
// 导入导航宫格组件
import Mygrid from '@/components/Mygrid.vue'
// 导入品牌制造商组件
import Brandlist from '@/components/Brandlist.vue';
// 导入新品列表组件
import Newproduct from '@/components/Newpoduct.vue'
// 导入专题精选组件
import Topiclist from '@/components/Topiclist.vue';

// 定义关键字搜索
const value = ref<string>('');
const bannerArr = ref<Array<Ibanneritem>>([]);
const channelArr = ref<Array<Ichannelitem>>([]);
const brandlistArr = ref<Array<Ibrandlistitem>>([]);
const newGoodsListArr = ref<Array<Inewgoodslistitem>>([])
const topicListArr = ref<Array<Itopiclistitem>>([]);
const categoryListArr = ref<Array<Icategorylistitem>>([])
onMounted(() => {
    gethomedata().then(res => {
        // console.log('res', res);
        const { banner, channel, brandList, newGoodsList, topicList, categoryList } = res.data.data
        bannerArr.value = banner
        channelArr.value = channel
        brandlistArr.value = brandList
        newGoodsListArr.value = newGoodsList
        topicListArr.value = topicList
        categoryListArr.value = categoryList
    })
})


</script>
<style scoped lang="scss">
.home {
    width: 375px;
    /* height: 100px;
    background-color: red; */
}

.categorylist {
    width: 100%;

    li {
        width: 100%;
    }
}
</style>